'use client'
// import { useRouter } from 'next/router';
import {useState, useEffect} from "react"
import sytles from "./index.module.scss"
import { useStore, TabType } from "@/store/tabs"
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function Tab(){
  const { state, dispatch } = useStore() as any;
  const handleTabChange = (tabIndex: TabType, e: any) => {
    e.stopPropagation();
    dispatch({type: tabIndex});
  };
  const pathName = usePathname();

    console.log('当前页面的地址', pathName);
    
  const haveActive = (type: TabType) => pathName.includes(type)  ? sytles.active : ''
  return(<div className={sytles.tab}>
    <Link href="/car"> <div className={`${sytles['grid-item']} ${haveActive('car')} ${'fa fa-car'}`} onClick={(e: any) => handleTabChange('car', e)}><div className={`${sytles['navName']}`}>车找人</div></div></Link>
    <Link href="/people"><div className={`${sytles['grid-item']} ${haveActive('people')} ${'fa fa-users'}`} onClick={(e:any) => handleTabChange("people", e)}><div className={`${sytles['navName']}`}>人找车</div></div></Link>
    <Link href="/release"><div className={`${sytles['grid-item']} ${haveActive('release')} ${'fa fa-solid fa-paper-plane'}`} onClick={(e:any) => handleTabChange("release", e)}><div className={`${sytles['navName']}`}>发布</div></div></Link>
    <Link href="/my"><div className={`${sytles['grid-item']} ${haveActive('my')} ${'fa fa-user'}`} onClick={(e:any) => handleTabChange("my", e)}><div className={`${sytles['navName']}`}>我</div></div></Link>
  </div>)
}


